<template>
  <div class="order-return-main">
    <div id="pie-echart" class="order-return" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default {
  mixins: [],
  data() {
    return {
      msg: 'hello world'
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const myChart = echarts.init(document.getElementById('pie-echart'))
    const option = {
      title: {
        text: '购买终端',
        left: 'left'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}数量 : {c}个;占比 ({d}%)',
        borderWidth: 0,
        borderColor: 'rgba(0,0,0,0)',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#ffffff'
        }
      },
      series: [
        {
          type: 'pie',
          radius: [50, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 0
          },
          label: {
            color: ['#861d8a', '#6d48dc', '#24a8ff', '#bd00ff']
          },

          labelLine: {
            // length: 100,
            // length2: 59

          },
          color: ['#861d8a', '#6d48dc', '#24a8ff', '#bd00ff'],
          data: [
            // { value: 3, name: 'Wap Web', itemStyle: {
            //   color: '#861d8a'
            // }},
            // { value: 58, name: 'Android', itemStyle: {
            //   color: '#6d48dc'
            // }},
            // { value: 40, name: 'IOS', itemStyle: {
            //   color: '#24a8ff'
            // }},
            // { value: 30, name: 'PC Web', itemStyle: {
            //   color: '#bd00ff'
            // }}
            { value: 3, name: 'Wap Web' },
            { value: 58, name: 'Android' },
            { value: 40, name: 'IOS' },
            { value: 30, name: 'PC Web' }
          ]
        }
      ]
    }

    myChart.setOption(option)
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.order-return-main{
  width: 100%;
  height: 100%;
  .order-return{
    margin: 0 auto;
    width: 400px;
    height: 400px;
    border: 1px solid red;
  }
}
</style>
